﻿<template>
    <div>
        <div class="jg-left pull-left ft14">
            <p class="mb10 ft16 padding20 c999" style="border-bottom: 1px solid #e5e5e5;">
                <i class="iconfont icon-tuodong  mr5"></i>职务列表
                <i class="iconfont icon-jiahao ft12 pull-right mt5 pl20" @click="RoleEdit(1)" title="添加职务" style="cursor: pointer"></i>
            </p>
            <ul class="jg-list-box">
                <li>
                    <div>
                        <input type="text" name="name" value="" v-model="searchrole" placeholder="搜索" class="form-control" style=" width: 95%; margin: 2px;" />
                    </div>
                </li>
                <li v-for="(item,index) in RoleListData" @click="GetUserList(item,index)" v-show="item.RoleName.indexOf(searchrole) > -1">
                    <div class="jg-item" v-bind:class="{active:item.RoleCode==SelRoleItem.RoleCode}" style="margin-top:0px">
                        <b class="ml15">
                            <i class="iconfont icon-group"></i>
                            <span class="jg-name">{{item.RoleName}}</span><i class="jg-number ft12 c999">（{{item.userCount}}人）</i>
                        </b>
                    </div>
                </li>
            </ul>
        </div>
        <div class="jg-right pt20 ft14">
            <div class="btn-add">
                <button type="button" class="btn btn-success" @click="RoleEdit(1)"><i class="iconfont icon-bianji ft14 mr5"></i>添加职务</button>
                <button type="button" class="btn btn-info" @click="RoleEdit(2)" v-if="SelRoleItem.RoleCode!=0"><i class="iconfont icon-bianji ft14 mr5"></i>修改职务</button>
                <button type="button" class="btn btn-danger" @click="DelRole()" v-if="SelRoleItem.isSysRole=='N'"><i class="iconfont icon-shanchu ft14 mr5"></i>删除职务</button>

            </div>
            <!-- 机构管理详情 -->
            <div class="jg-cont ft14">
                <div class=" ml15" style="position: relative">
                    <a class="c-default dropdown-toggle ft16" data-toggle="dropdown">
                        <i class="iconfont icon-bookmark c-default mr5"></i>职务详情
                    </a>
                </div>
                <div class="detail-con">

                    <div class="detail-item">
                        <span class="item-tit">职位名称：</span>
                        <div class="item-con">{{RoleUserData.RoleName}}</div>
                    </div>
                    <div class="detail-item">
                        <span class="item-tit">职位详情：</span>
                        <div class="item-con">{{RoleUserData.RoleDec}}</div>
                    </div>

                </div>
            </div>
            <!-- 分割线 -->
            <!--<div class="add-tab ft14 tc"></div>-->

            <div class="panel-all" style="margin: 20px">
                <div class="tab-box">
                    <ul>
                        <li @click="selqx(2)" v-bind:class="{active:qxtype=='2'}">
                            <a>角色用户列表</a>
                        </li>
                        <li @click="selqx(0)" v-bind:class="{active:qxtype=='0'}" v-show="nowName=='administrator'||nowName=='000000061'">
                            <a>功能权限</a>
                        </li>

                        <li @click="selqx(1)" v-bind:class="{active:qxtype=='1'}" v-show="nowName=='administrator'||nowName=='000000061'">
                            <a>机构权限</a>
                        </li>

                    </ul>
                </div>
                <div id="wrap">
                    <div class="detail-con" v-show="qxtype=='0'">

                        <div class="mb20">
                            <button type="button" class="btn btn-info btn-lg" @click="SaveModelAction()">保存职务权限</button>
                        </div>
                        <div v-for="arr in MenuModel">
                            <div class="page-title ft16 " style="margin-top: 5px; margin-bottom: 0px;">
                                <h4 class="title">{{arr}}</h4>
                            </div>
                            <div class="xtgl-list" v-for=" item in MenuAuthFun" v-show="item.ModelType==arr">
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <td class="child1" v-on:click.stop="SelAction(item,0)">
                                                <div class="icheckbox_square-blue" v-bind:class="{checked:item.issel}"><span class="iconfont icon-check ft12"></span></div>
                                                {{item.ModelName}}
                                            </td>
                                            <td class="child2">
                                                <div v-for="fun in item.FunData" v-if="fun.IsInit!='m'">
                                                    <div style="" v-on:click.stop="SelAction(fun,1)">
                                                        <div class="icheckbox_square-blue" v-bind:class="{checked:fun.issel}"><span class="iconfont icon-check ft12"></span></div>
                                                        {{fun.PageName}}
                                                    </div>
                                                    <div style="padding-left: 30px; padding-top: 5px;">
                                                        <span v-for="qx in fun.ActionData" v-on:click.stop="SelAction(qx,2)">
                                                            <div class="icheckbox_square-blue" v-bind:class="{checked:qx.isshow}"><span class="iconfont icon-check ft12"></span></div>
                                                            {{qx.czname}}
                                                        </span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="child2" style="width:30%">
                                                <div v-for="(fun,index) in item.FunData" v-if="fun.IsInit=='m'">
                                                    <p  v-show="index==0" style="border-left: 3px solid #2f9ed8;padding-left: 5px;margin-bottom: 5px;">移动端</p>
                                                    <div style="" v-on:click.stop="SelAction(fun,1)">
                                                        <div class="icheckbox_square-blue" v-bind:class="{checked:fun.issel}"><span class="iconfont icon-check ft12"></span></div>
                                                        {{fun.PageName}}
                                                    </div>
                                                    <div style="padding-left: 30px; padding-top: 5px;">
                                                        <span v-for="qx in fun.ActionData" v-on:click.stop="SelAction(qx,2)">
                                                            <div class="icheckbox_square-blue" v-bind:class="{checked:qx.isshow}"><span class="iconfont icon-check ft12"></span></div>
                                                            {{qx.czname}}
                                                        </span>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="mt20 mb20">
                            <button type="button" class="btn btn-info btn-lg" @click="SaveModelAction()">保存职务权限</button>
                        </div>
                    </div>
                    <div class="detail-con pb20" v-show="qxtype=='1'">
                        <div class="mt20 mb20">
                            <button type="button" class="btn btn-info btn-lg" @click="SaveJQQX()">保存机构权限</button>
                        </div>
                        <el-radio-group v-model="SelRoleItem.IsHasQX">
                            <el-radio label="0">个人</el-radio>
                            <el-radio label="1">本部门</el-radio>
                            <el-radio label="2">指定部门</el-radio>
                        </el-radio-group>
                        <ul class="jg-list-box " style="padding-left:10px" v-show="SelRoleItem.IsHasQX=='2'">
                            <el-tree class="filter-tree"
                                     :data="BranchListData"
                                     :props="defaultProps"
                                     :expand-on-click-node="iszk"
                                     node-key="DeptCode"
                                     default-expand-all
                                     show-checkbox
                                     highlight-current
                                     ref="tree">
                            </el-tree>
                        </ul>
                        <!--<iframe marginwidth="0" class="tabiframe" marginheight="0" frameborder="0" scrolling="no" height="100%" id="jgqx" name="jgqx" width="100%" style="min-height: 500px"></iframe>-->
                    </div>
                    <div class="detail-con pb20" v-show="qxtype=='2'">
                        <div style="float:right;margin-top:15PX">
                            <el-popover placement="right"
                                        trigger="click"
                                        v-model="visible">

                                <el-select v-model="selyg" multiple placeholder="请选择要设置角色的员工" size="small" filterable style="width:400PX">
                                    <el-option v-for="item in ygs"
                                               :key="item.UserName"
                                               :label="item.DeptName +'/'+item.UserRealName"
                                               :value="item.UserName">
                                    </el-option>
                                </el-select>
                                <div style="text-align: right;margin-top:5PX;margin-bottom:40PX">
                                    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                                    <el-button type="primary" size="mini" @click="addroleuser">确定</el-button>
                                </div>
                                <el-button slot="reference" size="small">添加角色用户</el-button>
                            </el-popover>
                        </div>
                        
                        <base-table :pzoption="tableop" @selection-change="handleSelectionChange">
                        </base-table>
                    </div>
                </div>
            </div>

            <!-- 权限 -->
            <div class="padding20">
            </div>

        </div>
        <div class="modal fade" id="EditRoleModal" role="dialog">
            <div class="modal-dialog" role="document" style="width: 700px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">编辑职务</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label for="branchName" class="col-xs-3 control-label text-right">职务名称</label>
                                <div class="col-xs-7">
                                    <input type="text" class="form-control" v-model="RoleData.RoleName" placeholder="请输入职务名称" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="branchDesc" class="col-xs-3 control-label text-right">职务排序</label>
                                <div class="col-xs-7">
                                    <textarea class="form-control" v-model="RoleData.DisplayOrder" id="roleorder" placeholder="请输入职务排序"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="branchDesc" class="col-xs-3 control-label text-right">职务描述</label>
                                <div class="col-xs-7">
                                    <textarea class="form-control" v-model="RoleData.RoleDec" id="branchDesc" placeholder="请输入职务描述"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-3 control-label">职务人员</label>
                                <div class="col-xs-7">
                                    <input type="text" value="" class="span2   form-control  szhl_getPeoples" v-model="strRoleUser" id="qygg2" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-success" id="conaddForder" @click="EditFun()"><i class="fa fa-spinner fa-spin" style="display: none"></i>确&nbsp;&nbsp;认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
    module.exports = {
        name: 'xtgl_roleindex',
        props: ['pzoption'],
        components: {
            'base-table': httpVueLoader('/ViewV5/Base/Vue/Table.vue')
        },
        data: function () {
            return {
                nowName: "",
                RoleUserData: {},
                RoleUser: [],
                RoleListData: [],
                SelRoleItem: {},
                selRoleIndex: 0,
                searchrole: "",
                qxtype: "2",
                MenuModel: [],
                MenuAuthFun: [],
                IsInitRole: "N",//是否需要默认加载权限，及分配权限
                RoleFunData: [],
                RoleData: { "RoleCode": "", "RoleName": "", "RoleDec": "", "IsUse": "Y", "IsSysRole": "N", "roleType": "业务职务", "IsHasQX": "1"  },
                strRoleUser: "",
                defaultProps: {
                    children: 'ChildBranch',
                    label: 'DeptName'
                },
                iszk: false,
                BranchListData: [],
                tableop: {
                    title: "角色用户列表",
                    tablename: "",
                    issel: true,
                    iscz: true,
                    isadd: true,
                    isedit: true,
                    ispldel: true,
                    isdel: true,
                    dataset: [],
                    pdid: "0",
                    multipleSelection: [],
                    czltabledata: [
                        {
                            colname: "去除角色用户", bttype: "text", isshow: true, mangefun: function (rowdata) {
                                var pro = this.$parent;
                                pro.$confirm('确认要删除从角色中删除此用户吗?', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning',
                                    center: true

                                }).then(() => {
                                    $.getJSON("/api/Auth/ExeAction?Action=DELROLEUSER", { P1: pro.SelRoleItem.RoleCode, P2: rowdata.UserName },
                                        function (result) {
                                            if (!$.trim(result.ErrorMsg)) {
                                                top.ComFunJS.winsuccess("删除成功");
                                                pro.GetUserList(pro.SelRoleItem, pro.selRoleIndex);
                                            }
                                        });
                                }).catch(() => {

                                });
                            },
                        },
                    ],
                    collist: [
                        { colid: "UserName", colname: "用户名", isshow: true, istip: true },
                        { colid: "BUSER", colname: "姓名", isshow: true, istip: true }

                    ]
                },
                seastr: "",
                visible: false,
                ygs: [],
                selyg: []
            }
        },
        methods: {
            seardata: function () {
                var pro = this;
                if (pro.seastr) {
                    var tabledata = JSON.parse(sessionStorage.getItem("baselistdata"));
                    const dv = new DataSet.View().source(tabledata);
                    var redata = [];
                    dv.transform({
                        type: 'filter',
                        callback(row) { // 判断某一行是否保留，默认返回true
                            return row["UserName"].indexOf(pro.seastr) > -1 || row["BUSER"].indexOf(pro.seastr) > -1;
                        }
                    });
                    redata = dv.rows;
                    pro.tableop.dataset = redata;
                } else {
                    pro.tableop.dataset = JSON.parse(sessionStorage.getItem("baselistdata"));
                }
            },
            reset: function () {
                this.seastr = "";
                this.seardata();
            },
            handleSelectionChange(val) {
                this.tableop.multipleSelection = val;
            },
            selqx: function (qxtype) {
                var tempindex = this;
                tempindex.qxtype = qxtype;
            },

            GetUserList: function (item, i) {
                var tempindex = this;
                tempindex.SelRoleItem = item;
                tempindex.selRoleIndex = i;
                tempindex.GetFunction(item.RoleCode);
                $.getJSON('/api/Auth/ExeAction?Action=GETROLEBYCODE', { "P1": item.RoleCode }, function (resultData) {
                    tempindex.RoleUserData = resultData.Result;
                    tempindex.RoleUser = resultData.Result1;
                    tempindex.tableop.dataset = resultData.Result1;
                  
                    tempindex.$refs.tree.setCheckedKeys([]);
                    if (resultData.Result2) {
                        tempindex.$refs.tree.setCheckedKeys(resultData.Result2.split(","));
                    }
                })


            },
            DelRole: function () {
                var tempindex = this;
                top.ComFunJS.winconfirm("确认要删除“" + tempindex.SelRoleItem.RoleName + "”吗？", function () {
                    $.getJSON("/api/Auth/ExeAction?Action=DELROLE", { P1: tempindex.SelRoleItem.RoleCode },
                        function (result) {
                            if ($.trim(result.ErrorMsg) == "") {

                                top.ComFunJS.winsuccess("删除" + tempindex.SelRoleItem.RoleName + "成功")
                                tempindex.RoleListData.removeAt(tempindex.selRoleIndex);
                                tempindex.SelRoleItem = tempindex.RoleListData[0];
                            }
                        });
                })
            },

            GetFunction: function (roleCode) {
                var tempindex = this;
                //获取主要菜单
                $.getJSON('/api/Auth/ExeAction?Action=GETFUNCTION', { P1: roleCode }, function (resultData) {
                    if (resultData.ErrorMsg == "") {
                        tempindex.IsInitRole = resultData.Result1;
                        if (resultData.Result != "") {
                            resultData.Result.forEach(function (val) {
                                var valflag = false;
                                val.FunData.forEach(function (fun) {
                                    fun.ActionData = eval(fun.ActionData);
                                    var flag = false;
                                    if (fun.FunCode || (tempindex.IsInitRole == "Y" && fun.IsInit == "Y" && typeof (parent.permodel) != "undefined")) {
                                        flag = true;
                                    }
                                    fun.ActionData.forEach(function (act) {
                                        if (fun.RoleFun && _.findIndex(fun.RoleFun.split(','), function (ac) { return ac == act.czname }) > -1) {
                                            act.isshow = true;
                                        } else {
                                            act.isshow = false;
                                        }
                                    })
                                    fun.issel = flag;
                                    if (fun.issel) {
                                        valflag = true;
                                    }
                                })
                                val.issel = valflag;

                            })
                            tempindex.MenuAuthFun = resultData.Result;
                            var temp = [];
                            for (var i = 0; i < resultData.Result.length; i++) {
                                if ($.inArray(resultData.Result[i].ModelType, temp) == -1) {
                                    temp.push(resultData.Result[i].ModelType)
                                }

                            }
                            tempindex.MenuModel = temp;
                        }
                    }
                })
            },
            SelAction: function (item, type) {
                var tempindex = this;
                var status = !item.issel;
                item.issel = status;
                if (type == 0) {
                    item.FunData.forEach(function (fun) {
                        fun.issel = status;
                        fun.ActionData.forEach(function (act) {
                            act.isshow = status;
                        })
                    })
                    item.issel = status;
                } else if (type == 1) {
                    item.ActionData.forEach(function (act) {
                        act.isshow = status;
                    })
                    item.issel = status;
                } else if (type == 2) {
                    item.isshow = status;
                }
            },
            SaveModelAction: function () {
                var tempindex = this;
                tempindex.RoleFunData = [];
                tempindex.MenuAuthFun.forEach(function (val) {
                    val.FunData.forEach(function (fun) {
                        if (fun.issel) {
                            fun.ActionData = eval(fun.ActionData);
                            var FunData = { "RoleCode": "", "FunCode": "", "ActionCode": "" };
                            FunData.RoleCode = tempindex.SelRoleItem.RoleCode;
                            FunData.FunCode = fun.ID;
                            var ActionCode = "";
                            fun.ActionData.forEach(function (act) {
                                if (act.isshow) {
                                    ActionCode = act.czname + "," + ActionCode;
                                }
                            })
                            FunData.ActionCode = ComFunJS.delendchar(ActionCode);
                            tempindex.RoleFunData.push(FunData);

                        }
                    })

                })
                var modelValue = JSON.stringify(tempindex.RoleFunData);

                $.getJSON("/api/Auth/ExeAction?Action=ADDROLEFUN", { P1: tempindex.SelRoleItem.RoleCode, P2: modelValue },
                    function (result) {
                        if ($.trim(result.ErrorMsg) == "") {

                            top.ComFunJS.winsuccess("操作成功");
                        }
                    });
            },
            DelRoleUser: function (item) {
                var tempindex = this;
                top.ComFunJS.winconfirm("确认要删除从角色中删除此用户吗？", function () {
                    $.getJSON("/api/Auth/ExeAction?Action=DELROLEUSER", { P1: item.RoleCode, P2: item.UserName },
                        function (result) {
                            if ($.trim(result.ErrorMsg) != "") {
                                top.ComFunJS.winwarning(result.ErrorMsg);
                            } else {
                                top.ComFunJS.winsuccess("删除成功");
                                tempindex.RoleUser.remove(item);
                                tempindex.RoleListData[tempindex.selRoleIndex].userCount--;
                                // tempindex.GetUserList(tempindex.RoleListData.$model[0], 0);
                            }
                        });
                })
            },
            SaveJQQX: function () {
                var tempindex = this;
                //所有选中得节点都要保存
                var alldata = _.concat(tempindex.$refs.tree.getHalfCheckedKeys(), tempindex.$refs.tree.getCheckedKeys());
                $.getJSON("/api/Auth/ExeAction?Action=SETROLEQX", { P1: alldata.join(), P2: tempindex.SelRoleItem.RoleCode, qx: tempindex.SelRoleItem.IsHasQX },
                    function (result) {
                        if (result.ErrorMsg == "") {
                            top.ComFunJS.winsuccess("设置成功");
                        }
                    });
            },
            RoleEdit: function (type) {
                var tempindex = this;
                if (type == 1)//添加角色
                {
                    tempindex.RoleData = { "RoleCode": 0, "RoleName": "", "RoleDec": "", "IsUse": "Y", "IsSysRole": "N", "roleType": "业务职务" };
                    tempindex.strRoleUser = "";
                    setTimeout("ComFunJS.initForm()", 500)
                    $('#EditRoleModal').modal('show');
                } else {
                    if (tempindex.SelRoleItem.RoleCode) {
                        //获取主要菜单
                        $.getJSON('/api/Auth/ExeAction?Action=GETROLEBYCODE', { "P1": tempindex.SelRoleItem.RoleCode }, function (resultData) {
                            if (resultData.ErrorMsg == "") {
                                tempindex.RoleData = resultData.Result;
                                if (resultData.Result1) {
                                    tempindex.strRoleUser = "";
                                    $(resultData.Result1).each(function (i, item) {
                                        tempindex.strRoleUser += item.UserName + ",";
                                    })
                                }
                                tempindex.strRoleUser = tempindex.strRoleUser.substring(0, tempindex.strRoleUser.length - 1);
                                setTimeout("ComFunJS.initForm()", 500)
                                $('#EditRoleModal').modal('show');
                            }
                        })
                    } else {

                        parent.ComFunJS.winwarning("请选择要修改的职务");
                    }
                }
            },
            EditFun: function () {
                var tempindex = this;
                if (!tempindex.RoleData.RoleName) {
                    top.ComFunJS.winwarning("请输入职务名称");
                    return;
                }
                var modelValue = JSON.stringify(tempindex.RoleData);
                $.getJSON("/api/Auth/ExeAction?Action=EditRole", { P1: modelValue, P2: $("#qygg2").val() },
                    function (result) {
                        if ($.trim(result.ErrorMsg) == "") {
                            top.ComFunJS.winsuccess("操作成功");
                            $('#EditRoleModal').modal('hide');
                            top.model.refpage();
                        }
                    }
                );
            },
            addroleuser: function () {
                var tempindex = this;
                if (tempindex.selyg.length == 0) {
                    top.ComFunJS.winwarning("请选择用户");
                    return;
                }
                tempindex.visible = false;
                $.getJSON("/api/Auth/ExeAction?Action=SETROLEUSER", { P1: tempindex.SelRoleItem.RoleCode, P2: tempindex.selyg.join() },
                    function (result) {
                        if ($.trim(result.ErrorMsg) == "") {
                            top.ComFunJS.winsuccess("操作成功");
                            tempindex.GetUserList(tempindex.SelRoleItem, tempindex.selRoleIndex);
                        }
                    }
                );
            }

        },
        mounted: function () {
            var chi = this;
            chi.$nextTick(function () {
                //获取主要菜单
                $.getJSON('/api/Auth/ExeAction?Action=GETROLE', {}, function (resultData) {
                    if (resultData.Result.length > 0) {
                        chi.RoleListData = resultData.Result;
                        chi.GetUserList(chi.RoleListData[0], 0);
                        //_.forEach(chi.RoleListData, function (item) {
                        //    if (item.RoleCode == '1219') {
                        //        chi.GetUserList(item, 0);
                        //    }
                        //})


                    }
                })
                $.getJSON('/api/Auth/ExeAction?Action=GETALLBMNEW', {}, function (resultData) {
                    chi.BranchListData = resultData.Result;
                })
                if (ComFunJS.getQueryString("isInit") == "Y") {//如果是初始化页面,删除职务操作
                    $(".isInit").remove();
                }
                chi.nowName = top.model.userName;

                $.getJSON('/api/Auth/ExeAction?Action=GETUSERJS', { P1: "" }, function (resultData) {
                    if (resultData.ErrorMsg == "") {
                        chi.ygs = resultData.Result;
                    }
                })
            })

        },
        watch: {
            childpro: { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                },
                deep: true
            }
        }
    };
</script>